<template>
    <div>
        <el-upload action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="handleChange"
            :file-list="fileList" :on-exceed="handleExceed" :auto-upload="false">
            <el-icon>
                <Plus />
            </el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible">
            <img :src="dialogImageUrl" alt="Preview Image" style="object-fit: cover;" />
        </el-dialog>
    </div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue';
import { ref, watch } from 'vue';

const props = defineProps({
    fileList: {
        type: Array,
        default: () => []
    }
});

const emit = defineEmits(['update:fileList']);

const dialogImageUrl = ref('');
const dialogVisible = ref(false);

watch(() => props.fileList, (newValue) => {
    console.log(props.fileList);
    // 监听fileList的变化，并更新fileList
    emit('update:fileList', newValue);
});
const handleRemove = (uploadFile, uploadFiles) => {
    emit('update:fileList', uploadFiles);
};

const handlePictureCardPreview = (uploadFile) => {

    dialogImageUrl.value = uploadFile.url;
    dialogVisible.value = true;
};

const handleChange = (file, uploadFiles) => {
    emit('update:fileList', uploadFiles);
};

const handleExceed = (files, uploadFiles) => {
    // 处理超出文件数量限制的逻辑
};
</script>